<template lang="html">
  <div class="butlet">

    <div class="headbar">
      <p>凯撒管家</p>
      <ul>
        <li @click="change_1()">
          <div class="">
            <span class="icon-pingjia"></span>
          </div>
          行程评价
        </li>
        <li>
          <div class="">
            <span class="icon-kefu"></span>
          </div>
          在线客服
        </li>
        <li @click="change1()">
          <div class="">
            <span class="icon-ditu"></span>
          </div>
          门店地图
        </li>
      </ul>

    </div>
    <p class="mid_title">出行助手</p>
    <div class="midbar">
      <div class="midbar_wrap">
        <img src="../../static/images/hangban.png" alt="">
        <p>航班动态</p>
      </div>
      <div class="midbar_wrap">
        <img src="../../static/images/huilv.png" alt="">
        <p>汇率计算</p>
      </div>
      <div @click="change()" class="midbar_wrap" to="/weather">
        <img src="../../static/images/weather.png" alt="">
        <p>世界天气</p>
      </div>
      <div @click="change_3()" class="midbar_wrap">
        <img src="../../static/images/youhui.png" alt="">
        <p>全球购物优惠</p>
      </div>
      <div @click="change_4()" class="midbar_wrap">
        <img src="../../static/images/yinlian.png" alt="">
        <p>银联活动</p>
      </div>
      <div @click="change_2()" class="midbar_wrap">
        <img src="../../static/images/fankui.png" alt="">
        <p>建议反馈</p>
      </div>
      <div class="midbar_wrap">

      </div>
      <div class="midbar_wrap">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      bol:false,
      name:'zhangsan'
    }
  },
  methods:{
    change(){
      this.$emit('transferbol',this.bol)
      console.log('chang is clicked' + this.bol);
      this.$router.push({
        path:'/weather'
      })
    },
    change1(){
      this.$router.push({
        path:'/mendian'
      })
    },
    change_1(){
      this.$router.push({
        path:'/pingjia'
      })
    },
    change_2(){
      this.$router.push({
        path:'/fankui'
      })
    },
    change_3(){
      this.$router.push({
        path:'/youhui'
      })
    },
    change_4(){
      this.$router.push({
        path:'/demo2'
      })
    }

  }

}
</script>

<style lang="css">
.headbar{
  /*height: 9rem;*/
  padding: 0.1px;
  background-color: #00b0ec;
  color: white;
}
.headbar>p{
  font-size: 2rem;
}
.headbar>ul{
  display: flex;
  justify-content: space-around;
  height: 8.7rem;
  /*line-height: 9rem;*/
  padding-top: 2rem;

}
.icon-pingjia:before {
  content: "\e904";
  color: #cdcdcd;
  font-size: 3rem;
  line-height: 4rem;
  color: white;
}
.icon-kefu:before {
  content: "\e903";
  color: #cdcdcd;
  font-size: 3rem;
  line-height: 4rem;
  color: white;
}
.icon-ditu:before {
  content: "\e901";
  color: #fff;
  font-size: 3rem;
  line-height: 4rem;
  color: white;
}
.mid_title{
  text-align: left;
  font-size: 1.5rem;
  height: 3.4rem;
  line-height: 3.4rem;
  padding: 0 4%;
  background-color: #f4f4f4;
  color: #999;
}
.midbar{
  width: 100%;
  /*display: flex;
  justify-content: space-around;*/

}
.midbar_wrap{
  color: #5A5E66;
  float: left;
  width: 7.6rem;
  height: 7.6rem;
  /*line-height: 9rem;*/
  text-align: center;
  /*border: .1px solid #E6EBF5;*/
}
.midbar_wrap>img{
  margin: 0 auto;
  /*height: 30%;*/
  width: 30%;
  padding-top: 1.5rem;
}
</style>
